<template>
  <div class="portal-map">
    <!-- 原有地图 -->
    <!-- <div id="mapCtx" class="map-content"></div> -->
    <div id="mapX" class="map" style="width:100%;height:100%">
      <div style="width:100%;height:100%;position: absolute;top: 0;left: 0;">
        <div
          ref="mapcontainer"
          data-view="24"
          style="overflow: hidden; width: 100%; height: 100%; touch-action: none;"
          class="map-container"
        >
          <canvas
            class="omap-unselectable"
            width="2000"
            height="1000"
            style="width: 100%; height: 100%; display: block;"
          ></canvas>
          <div id="11"></div>
          <div class="omap-overlay-container"></div>
          <div class="omap-overlay-container-stopevent">
            <div
              class="omap-overlay-container omap-selectable"
              style="position: absolute; left: 803.531px; bottom: 84.6328px;"
            >
              <div class="omap-tooltip" style="display: none;">新丰苑小区二区153号</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- 更换地图容器 -->
    <!-- <div id="mapDiv" class="map-container"></div> -->
    <SiteFilter @onSiteSelect="onSiteSelect" top="15%" left="1.5rem" />
    <x-page-title :isShowDistric="isShowDistric" :title="districtName" />

    <!-- 电子围栏 -->
    <IconDiv id="btn_fk"></IconDiv>

    <div class="fk_ul" id="fk_ul">
      <ul>
        <li @click="weilan(1)" :state="state1">
          <img src="../../assets/images/outside.png" alt />
          <span class="li_text">外围</span>
        </li>
        <li @click="weilan(2)" :state="state2">
          <img src="../../assets/images/road.png" alt />
          <span class="li_text">街道</span>
        </li>
        <li @click="weilan(3)" :state="state3">
          <img src="../../assets/images/house.png" alt />
          <span class="li_text">楼栋</span>
        </li>
        <li @click="weilan(4)" :state="state4">
          <img src="../../assets/images/floor.png" alt />
          <span class="li_text">楼层</span>
        </li>
      </ul>
    </div>

    <x-history @closeMask="closeMask('history')" v-if="isShowHis &&showlist.wei.includes(11)"  :id="id" :code="leader" />

    <Livedata
      @onClickHandle="onClickHandle"
      :liveDataObj="liveDataObj"
      :id="id"
      :leader="leader"
      top="20%"
      left="1.5rem"
    />
    <template v-if="isShowSliders">
      <!-- 底部设备过滤 -->
      <devicefilter :id="id" :leader="leader" @onSelect="onSelect" top="85%" left="22%" v-if="showlist.wei.includes(12)"/>
      <!-- 电子围栏 -->
      <x-weilan @getHistoryOneDay="getHistoryOneDay"  :code="leader" :newMap="newMap"></x-weilan>
      <!-- 监控-->
      <!-- <x-monitor :newMap="newMap" v-if="showlist.wei.includes(9)"/> -->
      <IconTodayWork @onClickHandle="onClickHandle" v-if="showlist.wei.includes(10)"></IconTodayWork>
      <!--历史记录-->
      <div class="history_dia" @click="isShowHis ? (isShowHis = false) : (isShowHis = true)" v-if="showlist.wei.includes(11)">
        <div class="history_icon">
          <p>
            <img src="../../assets/images/historyIco.png" alt />
          </p>
          <p>历史记录</p>
        </div>
      </div>
      <!-- 右侧告警信息 -->
      <x-warn
        @onRowClick="onRowClick"
        :index="CurrentSlider"
        :id="id"
        top="15%"
        modelW="522px"
        modelH="385px"
        :leader="leader"
        v-if="showlist.top.length>0"
      />
      <x-bottom-warn
        @onRowClick="onRowClick"
        :index="BottomCurrentSlider"
        :id="id"
        :leader="leader"
        :newMap="newMap"
        top="55%"
        modelW="522px"
        modelH="295px"
        v-if="showlist.bottom.length>0"
      />
      <x-slider v-if="showlist.top.length>0"   :list="showlist.top"/>
      <x-bottom-slider v-if="showlist.bottom.length>0"  :list="showlist.bottom"/>
      <!-- 楼层信息 -->
      <x-build
        v-if="isShowBuildList"
        @selectBuild="selectBuild"
        :name="districtName"
        :BuildList="BuildList"
      />
    </template>

    <x-people
      @closeMask="closeMask('people')"
      :PeopleEchartsData="PeopleEchartsData"
      v-if="isShowPeople"
      :code="leader"
    />
    <x-car @closeMask="closeMask('car')" :CarEchartsData="CarEchartsData" v-if="isShowCar" :code="leader"/>
    <x-unit @closeMask="closeMask('unit')" v-if="isShowUnit" :id="id" :code="leader" />
    <x-safe @closeMask="closeMask('safe')" v-if="isShowSafe" :id="id" :code="leader" />
    <x-power @closeMask="closeMask('power')" v-if="isShowPower" :id="id" :code="leader" />
    <x-lot @closeMask="closeMask('lot')" v-if="isShowLot" :id="id" :code="leader" />
    <x-control @closeMask="closeMask('control')" v-if="isShowControl"  :code="leader" />
    <x-house @closeMask="closeMask('house')" v-if="isShowHouse" :id="id" :code="leader" />
    <business-process :id="id" :PeopleEchartsData="PeopleEchartsData" @closeMask="closeMask('process')" v-if="isShowProcess" :code="leader"/>
    <x-devices-line @closeMask="closeMask('devicesline')" v-if="isShowDevicesLine"  :linedata="deviceslinedata"></x-devices-line>
    <x-devices-alarm :code="leader" @closeMask="closeMask('devicesAlarm')" v-if="isShowDevicesalarm"></x-devices-alarm>
    <x-important
      @closeMask="closeMask('important')"
      v-if="isShowImportant"
      :id="id"
      :code="leader"
    />
    <x-noc
      @viewDetail="viewDetail"
      @closeMask="closeMask('noc')"
      v-if="isShowNoc"
      :id="id"
      :code="leader"
      :nocInfo="nocInfo"
    />
    <x-noc-detail @closeMask="closeMask('nocdetail')" v-if="isShowNocDetail" :id="peopleId" />
    <x-floor @closeMask="closeMask('floor')" v-if="isShowFloor"  :code="leader" :name="nv" :id="buildId" />
    <XzuFang
      @closeMask="closeMask('zufang')"
      v-if="isShowzufang"
      :id="id"
      :code="leader"
      :zufangInfo="zufangInfo"
    ></XzuFang>
    <Xzhihuimenjin
      @closeMask="closeMask('zhihuimenjin')"
      v-if="isShowzhihuimenjin"
      :id="id"
      :code="leader"
      :zhihuimenjinInfo="zhihuimenjinInfo"
    ></Xzhihuimenjin>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="80%">
      <video class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline></video>
    </el-dialog>
    <x-todaywork @closeMask="closeMask('todaywork')" v-if="isShowTodaywork" :id="id" :code="leader"></x-todaywork>
  </div>

</template>
<script>
const path = require("path");
import AMap from "AMap";
import { mapGetters, mapActions } from "vuex";

import { GetDeviceLocationList, GetDeviceInfo,GetHistoryOneDay,GetRedisDeviceInfo,DevicesTypes,getLocationById } from "@/api/device";

import {
  GetPeopleInfo,
  GetCarsInfo,
  GetCamerTotleAndType,
  GetCamerInfoForPage,
  GetMapInfo,
  GetBorderCell,
  GetFloorInfo,
  GetBuildingList,
  GetEpidemicInfo,
  GetzufangInfo,
  getDisConfigByPlaceId
} from "@/api/peopleApi";
import Latestreport from "@/components/latestreport";
import Latestwarning from "@/components/latestwarning";
import Devicefilter from "@/components/devicefilter";
import SiteFilter from "@/components/sitefilter";
import Livedata from "@/components/livedata";
import XBuild from "@/components/xbuild";
import XPageTitle from "@/components/xpagetitle";
import XSlider from "@/components/xslider";
import XBottomSlider from "@/components/xbottomslider";
import XWarn from "@/components/xwarnbox";
import XBottomWarn from "@/components/xbottomwarnbox";
import XPeople from "@/components/xpeoplemodel";
import XCar from "@/components/xcarmodel";
import XUnit from "@/components/xunitmodel";
import XHistory from "@/components/xHistory";
import XSafe from "@/components/xsafemodel";
import XPower from "@/components/xpowermodel";
import XLot from "@/components/xlotmodel";
import XHouse from "@/components/xhousemodel";
import XNoc from "@/components/xnoclistmodel";
import XNocDetail from "@/components/xnocdetailmodel";
import XFloor from "@/components/xfloormodel";
import XMonitor from "@/components/xmonitor";
import XWeilan from "@/components/xweilan";
import XImportant from "@/components/ximportant";
import jkData from "./jiankong.json";
import mapxy from "./mapxy.json";
import picurls from "./wulianicon.json";
import IconDiv from "../../components/iconDiv/index.vue";
import XzuFang from "../../components/xzufang/index.vue";
import Xzhihuimenjin from "../../components/xzhihuimenjin/index.vue";
import XTodaywork from "@/components/xtodaywork";
import IconTodayWork from "../../components/iconTodayWork/index.vue";
import XDevicesLine from '@/components/xdevicesline';
import XDevicesAlarm from '@/components/xdevicesalarm';
import XControl from '@/components/xcontrol';
import BusinessProcess from '@/components/businessprocess'
let wifiLayer = null;

const LayerMap = {};

export default {
  name: "portalmap",
  data() {
    return {
      nv: null,
      newMap: null,
      id: "",
      leader: "",
      isShowSliders: false,
      // map: null,
      district: null,
      polyEditor: null, //多边形绘制

      districtName: "无锡市",
      isShowDistric: false,
      mapPoint: null,
      polygons: [],
      path: [],
      BuildList: [],
      bottomArrow: require("@/assets/images/bottom_arrow.png"),
      unitTypeList: [],
      alarmcodeJson: DevicesTypes(),
      iconImages: [
        {
          name: "智能井盖",
          icon: require("../../assets/images/icon/icon_yinjinggai.png")
        },
        {
          name: "可燃气体报警器",
          icon: require("../../assets/images/icon/icon_shangyongranqi.png")
        },
        {
          name: "烟感",
          icon: require("../../assets/images/icon/icon_yangan.png")
        },
        {
          name: "Lora基站",
          icon: require("../../assets/images/icon/icon_wifi.png")
        },
        {
          name: "消防水压传感器",
          icon: require("../../assets/images/icon/icon_shuibengfang.png")
        }
      ], //路径
      warnIconImages: [
        {
          name: "预警智能井盖",
          icon: require("../../assets/images/icon/icon_yjyinjinggai.png")
        },
        {
          name: "预警可燃气体报警器",
          icon: require("../../assets/images/icon/icon_yjshangyongranqi.png")
        },
        {
          name: "预警烟感",
          icon: require("../../assets/images/icon/icon_yjyg.png")
        },
        {
          name: "预警Lora基站",
          icon: require("../../assets/images/icon/icon_yjwifi.png")
        },
        {
          name: "预警消防水压传感器",
          icon: require("../../assets/images/icon/icon_yjsbf.png")
        }
      ],

      markersArr: [], //设备标记
      markersObj: {}, //设备标记,
      warnMarksArr: [], //预警设备标记,
      warnMarksObj: {}, //预警设备标记,
      MapManager: null,
      isShowPeople: false,
      PeopleEchartsData: [],
      isShowCar: false,
      CarEchartsData: [],
      UnitTypeEchartsData: [],
      UnitPageEchartsData: [],
      zufangInfo: [],
      zhihuimenjinInfo: [],
      isShowHis: false,
      isShowUnit: false,
      isShowSafe: false,
      isShowPower: false,
      isShowWarn: false,
      isShowLot: false,
      isShowHouse: false,
      isShowNoc: false,
      isShowDevicesLine:false,
      isShowNocDetail: false,
      isShowFloor: false,
      isShowBuildList: false,
      isShowImportant: false,
      isShowzufang: false,
      isShowzhihuimenjin: false,
      isShowDevicesalarm:false,
      isShowControl:false,
      isShowProcess:false,
      peopleId: "",
      buildId: "",
      liveDataObj: [],
      defaultZoom: 8,
      scaleLayer: null,
      dialogVisible: false,
      dialogTitle: "",
      state1: "",
      state2: "",
      state3: "",
      state4: "",
      firstFeatures: [],
      secondFeatures: [],
      thirdFeatures: [],
      fourthFeatures: [],
      firstGrid: [],
      secondGrid: [],
      thirdGrid: [],
      fourthGrid: [],
      show_fk: false,
      isShowTodaywork: false,
      deviceslinedata:{},
      showlist:{
        top:[],
        wei:[],
        bottom:[]
      }
    };
  },
  computed: {
    ...mapGetters([
      "getterCurrentItem",
      "getterBottomCurrentItem",
      "getterCurrentHouse"
    ]),
    CurrentSlider() {
      return this["getterCurrentItem"];
    },
    BottomCurrentSlider() {
      return this["getterBottomCurrentItem"];
    },
    CurrentHouse() {
      return this["getterCurrentHouse"];
    }
  },
  watch: {
    // CurrentHouse: {
    //   async handler(nv) {
    //     if (nv.id) {
    //       if (nv.id === 10050466) {
    //         nv.id = 39;
    //       }
    //       this.nv = nv;
    //       this.buildId = nv.id; // 调试写死
    //       this.isShowFloor = true;
    //     }
    //   },
    //   deep: true
    // }
  },

  mounted() {
    // console.log(this.$store)
    //    console.log(this.$store.getters.getterCurrentItem)
    //    this.$store.dispatch('GetSliderItemAction',2)
    var _this=this;
    // this.$refs.closebutton.addEventListener('click',function(){
    //   _this.newMap.clearAllPopup()
    // });




    console.log(222);
    // console.log(OMAP);
    this.GetBaseMapInfo();
    this.drawNewMap();
    this.$refs.mapcontainer.style.position = "absolute";
    var trans = new Transformation(45, 45, 49);
    console.log(trans.OCN2WGS84(35471375.74259556, 6574548.478707291));
    this.showFk();
    this.GetDictDataEnumList()
    // this.MapManager = new MapManager();
    // this.MapManager.init(this.newMap);
  },
  components: {
    XBuild,
    Latestreport,
    Latestwarning,
    Devicefilter,
    Livedata,
    XPageTitle,
    SiteFilter,
    XSlider,
    XWarn,
    XPeople,
    XCar,
    XUnit,
    XHistory,
    XSafe,
    XPower,
    XLot,
    XHouse,
    XNoc,
    XNocDetail,
    XFloor,
    XMonitor,
    XBottomSlider,
    XBottomWarn,
    XImportant,
    IconDiv,
    XzuFang,
    Xzhihuimenjin,
    XTodaywork,
    IconTodayWork,
    XDevicesLine,
    XWeilan,
    XDevicesAlarm,
    XControl,
    BusinessProcess
  },
  methods: {
    ...mapActions(["DeviceFilters/GetSliderItemAction"]),
    showFk() {
      let btn_fk = document.getElementById("btn_fk");
      let fk_ul = document.getElementById("fk_ul");
      btn_fk.onclick = function() {
        if (fk_ul.style.display == "block") {
          fk_ul.style.display = "none";
        } else {
          fk_ul.style.display = "block";
        }
      };
    },
    //电子围栏
    weilan(index) {
      var state = "";
      var grids = [];
      var sFeatures = null;
      var removeAll = false;
      //console.log(this.map)
      switch (index) {
        case 0:
          index = 0;
          removeAll = true;
          break;
        case 1:
          index = 1;
          if (this.state1 == "") {
            this.state1 = "active";
            state = "active";
          } else if (this.state1 == "active") {
            this.state1 = "";
            state = "";
          }
          grids = this.firstGrid;
          sFeatures = this.firstFeatures;
          break;
        case 2:
          index = 2;
          if (this.state2 == "") {
            this.state2 = "active";
            state = "active";
          } else if (this.state2 == "active") {
            this.state2 = "";
            state = "";
          }
          grids = this.secondGrid;
          sFeatures = this.secondFeatures;
          break;
        case 3:
          index = 3;
          if (this.state3 == "") {
            this.state3 = "active";
            state = "active";
          } else if (this.state3 == "active") {
            this.state3 = "";
            state = "";
          }
          grids = this.thirdGrid;
          sFeatures = this.thirdFeatures;
          break;
        case 4:
          index = 4;
          if (this.state4 == "") {
            this.state4 = "active";
            state = "active";
          } else if (this.state4 == "active") {
            this.state4 = "";
            state = "";
          }
          grids = this.fourthGrid;
          sFeatures = this.fourthFeatures;
          break;
      }
      if (removeAll) {
        this.state1 = "";
        this.state2 = "";
        this.state3 = "";
        this.state4 = "";
        this.MapManager.drawlayer.removeAllFeatures();
        this.firstFeatures = [];
        this.secondFeatures = [];
        this.thirdFeatures = [];
        this.fourthFeatures = [];
        this.MapManager.go2xy("35471906.063256", "6575118.1810676");
        this.MapManager.map.zoomTo(8);
        this.MapManager.removeAllFeatures();
      } else {
        if (state == "active") {
          if (grids.length > 0) {
            for (var i = 0; i < grids.length; i++) {
              this.showGrids(index, grids[i]);
            }
          } else {
            this.showGrids(index, grids);
          }
        } else {
          this.MapManager.drawlayer.removeFeatures(sFeatures);
        }
      }
      //this.drawLine()
      //this.drawMap();
    },
    showGrids(index, grid) {
      var sFeatures = [];
      var xs = "";
      var ys = "";
      var fillColor = "#00FFFFFF";
      var fillopacity = "0";
      var strokeColor = "#FF0000";
      var strokeWeight = "1";
      if (index == 0) {
        this.MapManager.go2xy("35471906.063256", "6575118.1810676");
        this.MapManager.map.zoomTo(8);
        this.MapManager.removeAllFeatures();
        return;
      }
      switch (index) {
        case 1:
          sFeatures = this.firstFeatures;
          xs = grid[0];
          ys = grid[1];
          var strokeColor = "#FF0000";
          var strokeWeight = "3";
          this.MapManager.go2xy("35472095.512454", "6575161.7711486");
          this.MapManager.map.zoomTo(6);
          //popomap.map.zoomAndCenter("35472088.806288", "6575183.5661891",6);
          break;
        case 2:
          sFeatures = this.secondFeatures;
          xs = grid[0];
          ys = grid[1];
          fillColor = "#00FFFF";
          fillopacity = "0.4";
          strokeColor = "#4169E1";
          strokeWeight = "0";
          break;
        case 3:
          sFeatures = this.thirdFeatures;
          xs = grid[0];
          ys = grid[1];
          fillColor = "#FFD700";
          fillopacity = "0.4";
          strokeColor = "#FFFF00";
          strokeWeight = "1";
          break;
        case 4:
          sFeatures = this.fourthFeatures;
          xs = grid[0];
          ys = grid[1];
          fillColor = "#FF4500";
          fillopacity = "0.4";
          strokeColor = "#FF4500";
          strokeWeight = "1";
          this.MapManager.go2xy("35472126.528472", "6575062.8551956");
          this.MapManager.map.zoomTo(8);
          break;
      }

      var grid = {
        address: "",
        cityCode: "",
        code: "",
        countryCode: "",
        createTime: "2018-09-12 22:17:59",
        createUserId: "",
        dataAreaCode: "370523800023",
        delFlag: "0",
        description: "",
        fillColor: fillColor,
        fillopacity: fillopacity,
        gradeValue: "0",
        gridArea: "",
        gridCode: "",
        gridType: "",
        id: "aa7546956555952d016556d9029a001f",
        identifyNumber: "",
        keywords: "",
        manageStatus: "",
        mapId: "",
        name: "新丰苑三期",
        orderNumber: "",
        orgId: "",
        remark: "",
        street: "",
        streetOffice: "",
        strokeColor: strokeColor,
        strokeWeight: strokeWeight,
        townCode: "",
        updateTime: "2018-09-12 22:17:59",
        updateUserId: "",
        villageCode: "",
        x: "",
        xs: xs,
        y: "",
        ys: ys
      };
      console.log(grid);
      var temp = this.drawGrid(grid);
      sFeatures.push(temp.feater);
      this.MapManager.drawlayer.addFeatures(sFeatures);
    },
    drawGrid(grid) {
      if (!grid) {
        return;
      }
      var lid = grid.orgId;
      var start_x, start_y;
      if (grid.xs.indexOf(",") != -1) {
        start_x = grid.xs.split(",")[0];
        start_y = grid.ys.split(",")[0];
      } else {
        start_x = grid.xs;
        start_y = grid.ys;
      }

      var o = {
        id: lid,
        closed: true,
        x: grid.x,
        y: grid.y,
        xs: grid.xs,
        ys: grid.ys,
        strokeweight: grid.strokeWeight,
        strokecolor: grid.strokeColor,
        fillcolor: grid.fillColor,
        opacity: grid.fillopacity,
        autoZoom: true,
        endarrow: "classic",
        dataAreaCode: grid.dataAreaCode
      };
      var accountid = "";

      var showline = {};
      showline.feater = this.MapManager.createLine(o);
      showline.feater.dataAreaCode = o.dataAreaCode;
      // 画网格名称

      /*showline.pop = popomap
              .createPop(
                'pop_wangge_' + lid,
                '<div class="ibox" onmousemove="this.parentNode.style.zIndex=200" onmouseout="this.parentNode.style.zIndex=100">'
                + '<div _child="body" class="map-info"><a href="#" code="'
                + grid.id
                + '" onclick="viewDetails(this)"><span _child="title">'
                + grid.name
                + '</span></a></div></div>',
                grid.x, grid.y, -35, -20, 100);*/
      return showline;
    },
    //预警信息点击
    onRowClick() {
      let keys = Object.keys(this.markersObj);
      keys.forEach(el => {
        this.map.remove(this.markersObj[el]);
      });
      this["DeviceFilters/GetSliderItemAction"]();
      this.addMapWarnMarker(
        1,
        120.389561,
        31.562623,
        this.warnIconImages[0].icon,
        ""
      );
    },
    // 放大地图
    handleSetCenter(zoom) {
      console.log(zoom);
      // this.map.setCenter([35471906.063256, 6575118.1810676], 10)
      this.newMap.setCenter([35471906.063256, 6575118.1810676], zoom);
    },
    // 更换地图 OMAP
    drawNewMap() {
      var map;
      console.log("绘制了");
      console.log( process.env.API)
      var option = {
        id: "map1",
        div: "mapX",
        center: [118.753313, 32.068917],
        proj: "EPSG:4326",
        projDefs: [
        {
          name: "EPSG:7150",
          text:
            "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=-14481.0 +y_0=-4374.0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs",
        },
        {
          name: "EPSG:32651",
          text: "+proj=utm +zone=51 +datum=WGS84 +units=m +no_defs",
        },
        {
          name: "EPSG:32650",
          text: "+proj=utm +zone=50 +datum=WGS84 +units=m +no_defs",
        },
        ],
        zoom: 14,
        controls: [
          {
            type: "mouseposition",
            option: null
          }
        ],
        bases: [
          {
          type: "TDTVEC",
          showLevel: ["3", "UNLIMIT"],
        },
        {
          type: "TDTCVA",
          showLevel: ["3", "UNLIMIT"],
        },
          {
            type: "OMAP",
            proj: "EPSG:32650",
            url: process.env.API+"/Tiles/tile_nj/",
            showLevel: ["UNLIMIT", "UNLIMIT"]
          },
          {
            type: "vecTileHotspot",
          proj: "EPSG:4326",
          layers: "hotspot:nanjing25d",
          version: "1.0.0",
          url: process.env.API2+'/geoserver/gwc/service/tms',
          showLevel: ["10", "UNLIMIT"],
          }
        ]
      };
      map = this.newMap = new MapClass(option);
      //  map.addEvent("点击", "click", null, function (e) {
      // console.log(e.coordinate);
      // });
     map.addHotspot(info => {
        console.log("************");
        console.log(info);
        //
        this.buildId = info.BUILDING_NUMBER
        //this.buildId = info.COMMUNITY_ID; // 调试写死
        this.nv = {
          name: info.NAME_,
          address: info.ADDRESS_,
          buildnum: info.BUILDING_NUMBER
        };

        let p=new Promise((res,rej)=>{
              res(this.getfloordata(info.BUILDING_NUMBER))
              // res(this.getfloordata(info.COMMUNITY_ID))
            })
            p.then(res=>{
              if (info.BUILDING_NUMBER != 19 && res.length>0) {
                this.isShowFloor = true;
              }
            })

      });
    },
    async getfloordata(id){
      const res =await  GetFloorInfo(id);
      console.log(res)
      return res
    },
    //选择区域
    async onSiteSelect(obj) {
      console.log("*********s");
      console.log(obj);
      console.log(obj.leader.length);
      console.log(mapxy);
      // var json = JSON.parse(mapxy);
      var json = mapxy.addr;
      console.log(json);
      this.$storage.set("place", obj);
      var center = [];

      this.newMap.removeLayer("kaili");

      // 小区
      let zoom = "";
      let params={
        id:obj.id,
        code:obj.leader
      }
      getLocationById(params).then(res=>{
        center = [Number(res.lx), Number(res.ly)];
        if (obj.leader.length === 4) {
          // 无锡市
          zoom = 14;
        } else if (obj.leader.length === 6) {
          // 区
          zoom = 15;
        } else if (obj.leader.length === 9) {
          // 街道
          zoom = 16;
        } else if (obj.leader.length === 12) {
          // 社区
          zoom = 17;
        }else if (obj.leader.length === 14){
          // 社区
          zoom = 18;
        }else{
          zoom=18
        }
        if(obj.leader=='abc123'){
          zoom=18
        }
        //凯利公社
        if(obj.leader=='32021405409901'){
          zoom=19
          this.drawKaili()
        }
        console.log(obj.leader)
        console.log("____________");
        console.log(center);
        console.log(zoom);
        this.newMap.zoomTo(center, zoom);
      })
      getDisConfigByPlaceId(obj.leader).then(res=>{
        // this.showlist=res
        //showlist 分为3部 top id:1-4 bottom id:5-8 ,9监控 10 本日工作 11 历史记录 12 物联设备列表
        this.showlist.top=res.filter(item=>{
          if(item.id<5){
            item.id=item.id-1
            return item
          }
        })
        this.showlist.bottom=res.filter(item=>{
          if(item.id>=5 && item.id<9){
            item.id=item.id-5
            return item
          }
        })
        var wei=[]
        wei=res.filter(item=>{
          if(item.id>8){
            return item
          }
        })
        this.showlist.wei=wei.map(item=>{
          return item.id
        })
        console.log(this.showlist.wei)

      })

      try {
        this.id = obj.id;
        this.leader = obj.leader;
        this.districtName = obj.label;
        this.GetBaseMapInfo();
        // if (this.polygons.length) {
        //   this.map.remove(this.polygons);
        // }
        // if (this.mapPoint) {
        //   this.map.remove(this.mapPoint);
        // }

        if (this.id && this.leader.length == 4) {
          this.isShowSliders = false;
          this.isShowDistric = false;
          // this.drawMap({ drawdistrict: true, level: "city" });
        } else if (this.id && this.leader.length == 6) {
          this.isShowSliders = false;
          this.isShowDistric = false;
          // this.drawMap({ zoom: 16, drawdistrict: true });
        } else if (this.id && this.leader.length == 9) {
          this.isShowSliders = false;
          this.isShowDistric = false;
          // this.drawMap({
          //   lng: 120.336503,
          //   lat: 31.569748,
          //   zoom: 16,
          //   isMrker: true
          // });
        } else if (this.id && this.leader.length == 12) {
          this.isShowDistric = true;
          this.isShowSliders = false;
          // this.path = await this.GetBorderCellInfo(this.id);
          // this.drawMap({
          //   zoom: 24,
          //   drawline: true
          // });
        } else {
          // this.path = await this.GetBorderCellInfo(this.leader);
          this.isShowSliders = true;
          // this.drawMap({
          //   zoom: 24,
          //   drawline: true
          // });
        }
      } catch (err) {
        this.$message({
          type: "error",
          message: err
        });
      }
    },

    //行政区域查询
    drawDistrict() {
      //行政区查询
      this.district.search(this.districtName, (status, result) => {
        this.map.remove(this.polygons); //清除上次结果
        this.polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              strokeWeight: 2,
              path: bounds[i],
              fillOpacity: 0,
              strokeOpacity: 1,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
              strokeStyle: "dashed"
            });
            this.polygons.push(polygon);
          }
        }
        this.map.add(this.polygons);

        this.map.setFitView(this.polygons); //视口自适应
      });
    },
    //小区边界绘制
    drawLine() {
      let dispolygon = new AMap.Polygon({
        path: this.path,
        strokeColor: "#0091ea",
        strokeWeight: 2,
        strokeOpacity: 1,
        fillOpacity: 0,
        fillColor: "#80d8ff",
        strokeStyle: "dashed",
        zIndex: 50
      });

      this.map.add(dispolygon);
      this.map.setFitView(dispolygon); //视口自适应
    },
    //过滤
    onSelect(type, filters) {
      console.log(type);
      console.log(filters);
      let keys = Object.keys(this.warnMarksObj);
      this.newMap.clearAllPopup()
      keys.forEach(rs => {
        this.map.remove(this.warnMarksObj[rs]);
      });
      if (filters.includes(type)) {
        this.markersArr = [];
        this.getLocation(type);
      } else {
        this.removeLocation(type);
      }
    },
    //获取位置
    async getLocation(type) {
      try {
        let params = {
          pageNum: "1",
          pageSize: "20",
          code: this.leader,
          deviceType: type
        };
        if (this.id) {
          Object.assign(params, {
            id: this.id
          });
        }
        const res = await GetDeviceLocationList(params);
        let path = [];
        res.rows.forEach(el => {
          let tpmLocal = [
            el.deviceId,
            el.deviceName,
            Number(el.location.split(",")[0]),
            Number(el.location.split(",")[1]),
            el.deviceId,
            type
          ];
          path.push(tpmLocal);
        });
        console.log(res, path, "xxxxxxxxxxx");
        console.log(path);
        this.addMapMarker(type, path);

        // for (let i = 0; i < path.length; i++) {
        //   this.addMapMarker(
        //     type,
        //     path[i][0],
        //     path[i][1],
        //     this.iconImages[Number(type) - 1].icon,
        //     res.rows[i]
        //   );
        // this.addNewMapMaker(
        //   type,
        //   path[i][0],
        //   path[i][1],
        //   this.iconImages[Number(type) - 1].icon,
        //   res.rows[i]
        // )
        // }
      } catch (error) {
        console.log(error);
      }
    },
    // addNewMapMaker(type, lng, lat, icon, device) {
    //   var markers = new OMAP.Layer.Markers("Markers");
    //  this.newMap.addLayer(markers);
    //  var size = new OMAP.Size(21, 25);
    //  var offset = new OMAP.Pixel(-(size.w / 2), -size.h);
    //  var icon = new OMAP.Icon(icon, size, offset);
    //  var marker = new OMAP.Marker(new OMAP.LonLat(
    //    35471998.4275141,
    //   6574878.4562363), icon);
    //   console.log(this.iconImages[Number(type) - 1].icon)
    //  markers.addMarker(marker);
    // },
    handleDeleteMaker(type) {
      // var markers = new OMAP.Layer.Markers("Markers");
      //  var lng= 35471998.4275141;
      //  var lat=6574878.4562363;
      // this.newMap.removeLayer(new OMAP.Marker(new OMAP.LonLat(lng,lat), null));
      // var size = new OMAP.Size(21, 25);
      // var offset = new OMAP.Pixel(-(size.w / 2), -size.h);
      // var icon = new OMAP.Icon(icon, size, offset);
      //  var viaMarker = new OMAP.Marker(new OMAP.LonLat(lng,lat), null);
      // this.newMap.removeAllFeatures()
      // markers.addMarker(viaMarker);
      LayerMap[type].removeAllFeatures();
    },
    //增加markers
    addMapMarker(type, data) {
      console.log("base" + type);
      var _this=this;
      var lay = this.newMap.addLayer({
        id: "base" + type,
        type: "vector",
        events: {
          featureClick: function(f) {
            console.log("*********");
            console.log('我是物联')
             setTimeout(()=>{

            },100)
            let p=new Promise((res,rej)=>{
              _this.newMap.removePopup('test')
              _this.newMap.clearAllPopup()
              res()
            })
            p.then(res=>{
               _this.getHistoryOneDay(f.attributes.type)
            })
            console.log(f);
            console.log(f.attributes.type)

            console.log("*********");
          },
          featureMouseMove:function(f,e){
            var id="test"
            var position=[f.attributes.x,f.attributes.y]
            console.log(f)
            console.log(e)
            let p=new Promise((res,rej)=>{
              res(_this.getRedisDeviceInfo(f.attributes.type))
            })
            p.then(res=>{
              var template=''
              template+=_this.forObject(res,f.attributes.type[5])
              let element = document.createElement('div')
              element.style.zIndex="9999"
                element.innerHTML=template
                var closer=document.createElement('div')
                closer.innerHTML='<div class="close" ref="closebutton">X</div>'
                var positioning=['R','B']
                console.log('created')
                _this.newMap.addPopup(
                  id,
                  position,
                  element,
                  null,
                  positioning
                )
            })

          },
          featureMouseOut:function(f){
            setTimeout(()=>{
              _this.newMap.removePopup('test')
              _this.newMap.clearAllPopup()
              console.log('remove了')
            },1000)

          }
        }
      });

      // var features = this.newMap.addFeatures(lay, "Point", [
      //   {
      //     x: 120.3850555229035,
      //     y: 31.56388272771701
      //   },
      //   {
      //     x: 120.3856,
      //     y: 31.56388272771701
      //   }
      // ]);
      // var _this = this;

      // var style = {
      //   image:
      //   imageSize: [34, 76],
      //   imageCenter: ["C", "C"],
      //   imageOpacity: 1,
        // labelText: "",
        // labelFontSize: "15px",
        // labelFontStyle: "宋体",
        // labelStrokeWidth: 2,
        // labelStrokeColor: "white",
        // labelFillColor: "blue"
      // };
      // style = this.newMap.createStyle(style);
      // features[0].setStyle(style);

      this.drawPointsByVideo(data, lay);

      // let that = this;
      // LayerMap[type] = new OMAP.Layer.Vector("Layer" + type, {
      //   renderers: ["SVG"],
      //   eventListeners: {
      //     // 图层事件
      //     featureclick(e) {
      //       // 点击事件;
      //       // 这里加通用弹层
      //       console.log(e.feature.data, "idddddddddddddddddddd");
      //     },
      //     featureover: e => {
      //       // 移入事件
      //     },
      //     featureout: function(e) {
      //       // 移出事件
      //     }
      //   }
      // });

      // var features = this.drawPointsByVideo(data);
      // console.log(features);
      // LayerMap[type].addFeatures(features);
      // this.newMap.addLayer(LayerMap[type]);
    },
    async getRedisDeviceInfo(data){
      var arg={
        placeId:this.leader,
        deviceType:data[5],
        deviceId:data[0]
      }
      var res=await GetRedisDeviceInfo(arg)
      return res
    },
    getPointFeature(item, style) {
      console.log("item", item);
      var object = new OMAP.Geometry.Point(item.lon, item.lat);
      var typestr = "Point_" + item.id;
      var feature = new OMAP.Feature.Vector(object, item, style);
      feature.attributes.pid = typestr;
      return feature;
    },
    drawPointsByVideo(items, lay) {
      var pics = picurls.pic;
      var features = [];
      var x;
      var y;
      for (var i = 0; i < items.length; i++) {
        var o = JSON.parse(JSON.stringify(items[i]));
        console.log("ooooo", o);
        var img = require("../../assets/images/icon_syaf.png");
        if (o[5] == "xiaofang") {
          img = require("../../assets/images/sxt.png");
        }
        var img;
        //2 3 x y
        //o[5] type
        pics.map(item => {
          if (item.type == o[5]) {
            img = item.src;
          }
        });

        var style = {
          image: img,
          imageSize: [34, 76],
          imageCenter: ["C", "C"],
          imageOpacity: 1,

        };
        var features = this.newMap.addFeatures(lay, "Point", [
          {
            x: o[2],
            y: o[3],
            type:o
          }
        ]);
        style = this.newMap.createStyle(style);
        features[0].setStyle(style);
        // console.log("xxx", o[0]);
        // let oo = {};
        // oo.id = o[0];
        // oo.name = o[1];
        // oo.x = o[2];
        // oo.y = o[3];
        // oo.lon = o[2];
        // oo.lat = o[3];
        // oo.url = o[4];
        // oo.num = i;
        // var feature = this.getPointFeature(oo, style);
        // features.push(feature);
        // x = o[2];
        // y = o[3];
      }
      return features;
    },
    //增加预警图标
    addMapWarnMarker(type, lng, lat, icon, device) {
      let viaMarker = new AMap.Marker({
        map: this.map,
        position: new AMap.LngLat(lng, lat),
        // 将一张图片的地址设置为 icon
        icon: icon,
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-20, -35)
      });
      this.warnMarksArr.push(viaMarker);
      this.warnMarksObj[type] = this.warnMarksArr;
      this.createInfoWindow(viaMarker, device);
    },
    //实例化信息窗体
    createInfoWindow(viaMarker, device) {
      //实例化信息窗体
      let title = `<span class="txt">${device.deviceName}</span>`,
        content = [];
      content.push(`<span class="txt" >设备型号:${device.deviceModel}</span>`);
      content.push(
        `<span class="txt">设备地址:${device.addressDescription}</span>`
      );
      content.push(`<span class="txt">盒子编码:${device.boxCode}</span>`);
      content.push(`<span class="txt">设备定位:(${device.location})</span>`);

      let infoWindow = new AMap.InfoWindow({
        anchor: "bottom-center",
        isCustom: true, //使用自定义窗体
        content: this.createInfoCtx(title, content.join("<br/>")),
        offset: new AMap.Pixel(0, -45) //使用默认信息窗体框样式，显示信息内容
      });

      AMap.event.addListener(viaMarker, "click", () => {
        //  GetDeviceInfo()
        infoWindow.open(this.map, viaMarker.getPosition());
      });
    },
    //构建自定义信息窗体
    createInfoCtx(title, content) {
      let info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";
      // 定义顶部标题
      let top = document.createElement("div");
      let titleD = document.createElement("div");
      let closeX = document.createElement("sp");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.className = "iconfont icon-close";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      let middle = document.createElement("div");
      middle.className = "info-middle";
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      let bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = "relative";
      bottom.style.top = "0px";
      bottom.style.margin = "0 auto";
      let sharp = document.createElement("img");
      sharp.src = this.bottomArrow;
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    //关闭窗口
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
    //移除marker
    removeLocation(type) {
      console.log("base" + type);
      this.newMap.removeLayer("base" + type);
      // this.newMap.clearAllFeature();
      // console.log(this.markersObj, type);

      // this.handleDeleteMaker(type);
    },
    //查看一标八实信息
    async GetBaseMapInfo() {
      try {
        let query = {
          id: this.id,
          code: this.leader
        };
        this.liveDataObj = await GetMapInfo(query);
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    //获取小区边界
    GetBorderCellInfo(id) {
      // try {
      //   const res = await GetBorderCell(id);
      //   return Promise.resolve(res.itmes);
      // } catch (error) {
      //   this.$message({
      //     type: "error",
      //     message: error
      //   });
      // }
    },
    //获取小区楼栋信息
    async GetBuildingInfo() {
      try {
        let params = {
          id: this.id,
          code: this.leader
        };
        this.BuildList = await GetBuildingList(params);

      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    //一标八实点击事件
    async onClickHandle(type) {
      try {
        if (!this.leader && !this.id) {
          this.$message({
            type: "info",
            message: "请先选择小区"
          });
          return;
        }
        switch (type) {
          case "people":
            let peopleQuery = {
              code: this.leader,
              id: this.id,
              remark: "22,29,19;9,15,17;27,12,6;28,23,20;10,7,23;24,21,26;8,18,43"
            };
            this.PeopleEchartsData = await GetPeopleInfo(peopleQuery);
            this.isShowPeople = true;
            break;
          case "car":
            let carquery = {
              code: this.leader,
              id: this.id
            };
            this.CarEchartsData = await GetCarsInfo(carquery);

            this.isShowCar = true;
            break;
          case "unit":
            this.isShowUnit = true;
            break;
          case "safe":
            this.isShowSafe = true;
            break;
          case "power":
            this.isShowPower = true;
            break;
          case "warn":
            this.isShowBuildList = true;
            this.GetBuildingInfo();
            break;
          case "lot":
            this.isShowLot = true;
            break;
          case "house":
            this.isShowHouse = true;
            break;
          case "noc":
            let nocquery = {
              code: this.leader,
              id: this.id
            };
            this.nocInfo = await GetEpidemicInfo(nocquery);
            this.isShowNoc = true;
            break;
          case "zhihuimenjin":
            let zhihuimenjinquery = {
              code: this.leader,
              id: this.id
            };
            this.zhihuimenjinInfo = await GetEpidemicInfo(zhihuimenjinquery)
            this.isShowzhihuimenjin = true;
            break;
          case "zufang":
            let zufangquery = {
              code: this.leader,
              id: this.id
            };
            this.zufangInfo = await GetzufangInfo(zufangquery);
            console.log("555", this.zufangInfo);
            this.isShowzufang = true;
            break;
          case "important":
            this.isShowImportant = true;
            break;
          case "todaywork":
            this.isShowTodaywork = true;
            break;
          case "history":
            this.isShowPower = true;
            break;
          case "devicesline":
            this.isShowDevicesLine = true;
            break;
          case "devicesalerm":
            this.isShowDevicesalarm=true;
            break;
          case "control":
            this.isShowControl=true;
            break;
          case "process":
            let people = {
              code: this.leader,
              id: this.id,
              remark: "22,29,19;9,15,17;27,12,6;28,23,20;10,7,23;24,21,26;8,18,43"
            };

            this.PeopleEchartsData = await GetPeopleInfo(people);
            console.log(this.PeopleEchartsData)
            this.isShowProcess=true;
            break;
        }
      } catch (error) {
        console.log(error);
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    //关闭弹框
    closeMask(type) {
      switch (type) {
        case "people":
          this.isShowPeople = false;
          break;
        case "car":
          // let carquery = {
          //   code: this.leader,
          //   id: this.id
          // };
          // this.CarEchartsData = await GetCarsInfo(carquery);

          this.isShowCar = false;
          break;
        case "unit":
          this.isShowUnit = false;
          break;
        case "safe":
          this.isShowSafe = false;
          break;
        case "power":
          this.isShowPower = false;
          break;
        case "lot":
          this.isShowLot = false;
          break;
        case "warn":
          this.isShowWarn = false;
          break;
        case "house":
          this.isShowHouse = false;
          break;
        case "noc":
          this.isShowNoc = false;
          break;
        case "nocdetail":
          this.isShowNocDetail = false;
          break;
        case "floor":
          this.isShowFloor = false;
          break;
        case "important":
          this.isShowImportant = false;
          break;
        case "zhihuimenjin":
          this.isShowzhihuimenjin = false;
          break;
        case "zufang":
          this.isShowzufang = false;
          break;
        case "history":
          this.isShowHis = false;
          break;
        case "todaywork":
          this.isShowTodaywork = false;
          break;
        case "devicesline":
          this.isShowDevicesLine = false;
          break;
        case "devicesAlarm":
          this.isShowDevicesalarm=false;
          break;
        case "control":
          this.isShowControl=false;
          break;
        case "process":
          this.isShowProcess=false;
          break;
      }
    },
    //查看详情
    viewDetail(id) {
      this.isShowNoc = false;
      this.peopleId = id;
      this.isShowNocDetail = true;
    },
    //选择楼层
    selectBuild(id) {
      this.buildId = id;
      this.isShowFloor = true;
    },
    //设备24h数据
    async getHistoryOneDay(data){

      var arg={
        placeId:this.leader,
        deviceType:data[5],
        deviceId:data[0]
      }
      // var arg={
      //   deviceId:'004a77006200024c',
      //   deviceType:'10',
      //   placeId:'abc123'
      // }
      var res=await GetHistoryOneDay(arg)
      this.deviceslinedata=Object.assign({list:res},{deviceType:data})
      await this.onClickHandle("devicesline")
      console.log(res)
    },
    forObject(res,type){
      var template=''
      if(res.alarmcode){//报警
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">'+this.switchDevices(res.devtype)+'</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">状态:</div><div class="right">'+"报警"+'</div></div>'

      }else{
          if(Object.keys(res).length != 0){
          if(type=='10'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">小型气象站监测</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">温度:</div><div class="right">'+res.temp/10+'℃</div></div>'
            template+='<div class="boxline"><div class="left">湿度:</div><div class="right">'+res.hum/10+'%RH</div></div>'
            template+='<div class="boxline"><div class="left">风速:</div><div class="right">'+res.avgspeed/10+'m/s</div></div>'
            template+='<div class="boxline"><div class="left">雨量:</div><div class="right">'+res.rain/10+'mm</div></div>'
            template+='<div class="boxline"><div class="left">辐射:</div><div class="right">'+res.radiation/10+'w/m2</div></div>'
            template+='<div class="boxline"><div class="left">PM2.5:</div><div class="right">'+res['PM2.5']/10+'ug/m3</div></div>'
          }
          if(type=='1'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">窨井盖监测</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">倾斜角度:</div><div class="right">'+res.angle+'度</div></div>'
          }
          if(type=='11'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">水表</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">累计量:</div><div class="right">'+res.accum+'</div></div>'
          }
          if(type=='2'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">可燃气体报警</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">检测值:</div><div class="right">'+res.gasvalue+'％LEL</div></div>'
          }
          if(type=='3'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">无线烟感</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">烟浓度值:</div><div class="right">'+res.SM+'</div></div>'
          }
          if(type=='5'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">消防栓水压监测</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">水压:</div><div class="right">'+res.pressure+'Kpa</div></div>'
          }
          if(type=='7'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">消防水箱液位监测</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">液位压力:</div><div class="right">'+res.hydraulic+'mm</div></div>'
          }
          if(type=='8'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">水泵房​漏水监测</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">液位:</div><div class="right">'+res.distance+'mm</div></div>'
          }
            if(type=='9'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">水浸传感器</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">水浸状态:</div><div class="right">'+res.status=="0"?"安全":"报警"+'</div></div>'
          }
          if(type=='14'){
            template+='<div class="boxline"><div class="left">设备:</div><div class="right">污水井液位监测</div></div>'
            template+='<div class="boxline"><div class="left">位置:</div><div class="right">'+res.location+'</div></div>'
            template+='<div class="boxline"><div class="left">时间:</div><div class="right">'+new Date().dateFtt1(res.time)+'</div></div>'
            template+='<div class="boxline"><div class="left">液位:</div><div class="right">'+res.distance+'mm</div></div>'
          }
        }
      }


      return template

    },
      //获取类型
    GetDictDataEnumList() {
      var data = {};
      var arr = [];
      this.alarmcodeJson.map(item => {
        let name = item.devname;
        data[name] = item.devtype;
        // Object.assign(data, { name: item.devtype });
      });
      for (var i in data) {
        arr.push({
          enumName: i,
          id: data[i]
        });
      }
      this.unitTypeList = arr;

    },
    switchDevices(id){
      var name=''
      console.log(this.unitTypeList)
      this.unitTypeList.map(item=>{
        if(item.id==id){
          name=item.enumName
        }
      })
      return name
    },
    //凯利公社
    drawKaili(){
      var _this=this;
      var lay = this.newMap.addLayer({
        id: "kaili",
        type: "vector",
        events: {
          featureClick: function(f) {
            console.log("*********");
            console.log(f.attributes.features);
            // _that.dialogVisible = true;

            var info = f.attributes.features;
            _this.buildId = info.COMMUNITY_ID; // 调试写死
            _this.nv = {
              name: info.name,
              address: '江苏省无锡市梅村街道凯利公社',
            };
              _this.isShowFloor = true;

          }
        }
      });
      var imgs=[
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
        ,
        ''
      ]
      var items=[
        {num:1,x:"120.42894997652986",y:"31.535248385108495",img:imgs[0],COMMUNITY_ID:'247'},
        {num:2,x:"120.42954907305905",y:"31.535248385108495",img:imgs[1],COMMUNITY_ID:'240'},
        {num:3,x:"120.4302080582864",y:"31.53500774066844",img:imgs[2],COMMUNITY_ID:'241'},
        {num:4,x:"120.43107005320856",y:"31.534758379049087",img:imgs[3],COMMUNITY_ID:'239'},
        {num:5,x:"120.43124930020788",y:"31.535608387849713",img:imgs[4],COMMUNITY_ID:'243'},
        {num:6,x:"120.43070946373412",y:"31.536088838539506",img:imgs[5],COMMUNITY_ID:'242'},
        {num:7,x:"120.43011548016587",y:"31.536345199048007",img:imgs[6],COMMUNITY_ID:'244'},
        {num:8,x:"120.42931492459395",y:"31.53624490957656",img:imgs[7],COMMUNITY_ID:'245'},
        {num:9,x:"120.43033718150475",y:"31.536875983066345",img:imgs[8],COMMUNITY_ID:'249'},
        {num:10,x:"120.43149820082256",y:"31.536520674190903",img:imgs[9],COMMUNITY_ID:'246'},
        {num:11,x:"120.43010185957321",y:"31.535709557420994",img:imgs[10],COMMUNITY_ID:'248'},
      ]
       var x;
      var y;
      for (var i = 0; i < items.length; i++) {
        var o = JSON.parse(JSON.stringify(items[i]));
        var style = {
          image: items[i].img,
          imageSize: [200,300],
          imageCenter: ["C", "C"],
          imageOpacity: 1
        };

        var features = this.newMap.addFeatures(lay, "Point", [
          {
            x: items[i].x,
            y: items[i].y,
            features: {
              COMMUNITY_ID:items[i].COMMUNITY_ID,
              name:'凯利公社'+items[i].num+'号'
            }
          }
        ]);
        style = this.newMap.createStyle(style);
        features[0].setStyle(style);
      }
      return features;

    }
  }
};
</script>
<style lang="less">
.omap-overlay-container{
  z-index: 11111;
}
.boxline{
  background: rgba(9,15,31);
  color:#fff;
  border:1px solid rgba(94,177,211);
  line-height: 25px;
  height:27px;
  text-align: left;
  width: 250px;
  display: flex;
  z-index: 11111;
  .left{
    width: 100px;
  }
  .right{
    width:200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.close{
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(9,15,31);
  color:#fff;
  transform: translate(50%,-50%);
  cursor: pointer;
}
.test-button {
  position: fixed;
  z-index: 999999;
  background: red;
  top: 50%;
  left: 50%;
}

.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.custom-info {
  width: 12rem;
  border: solid 1px #61c8d4;
  border-radius: 5px !important;
  .iconfont.icon-close {
    color: white;
    position: absolute;
    right: 10px;
    top: 5px;
  }

  .txt {
    font-size: 0.6rem;
    color: white;
    text-align: left;
    margin-left: 1rem;
  }

  .info-top {
    position: relative;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 5px 5px 0 0;
  }

  .info-top div {
    display: inline-block;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    line-height: 31px;
    padding: 0 10px;
  }

  .info-middle {
    font-size: 0.6rem;
    text-align: left;
    padding: 10px 6px;
    line-height: 20px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 0 0 5px 5px;
  }

  .info-bottom {
    height: 0px;
    width: 100%;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    clear: both;
    text-align: center;
  }
}
</style>
<style lang="less">
.portal-map {
  width: 100%;
  height: 100%;
  .map-content {
    width: 100%;
    height: 100%;
    opacity: 0.6;
  }

  .jk-dialog {
    .el-dialog {
      margin-left: 10%;
       background-color: rgba(0, 0, 0, 0.7);
      .el-dialog__title {
        color: #c9fbfe;
      }
      .el-dialog__body{
        padding:0
      }
    }

    video {
      width: 100%;
      height: 100%;
    }
  }
}

.div1 {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  ul {
    list-style: none;
    li {
      display: inline-block;
      width: 50px;
    }
  }
}

.v-modal {
  display: none;
}

.history_icon {
  width: 110px;
  height: 88px;
  background: url(../../assets/images/bottomBg.png) no-repeat;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  cursor: pointer;
  p {
    color: #72edf5;
    font-size: 14px;
  }

  p:nth-child(2) {
    margin-top: -7px;
  }
}

.fk_ul {
  width: 110px;
  height: 200px;
  list-style: none;
  position: absolute;
  background: url(../../assets/images/fktop_bg.png) no-repeat;
  bottom: 110px;
  left: 20px;
  display: none;
  ul {
    list-style: none;
    margin-left: -32px;
    li {
      width: 90px;
      height: 40px;
      line-height: 40px;
      margin-bottom: 5px;
      overflow: hidden;
      user-select: none;
      cursor: pointer;
      img {
        float: left;
        margin-left: 15px;
      }

      .li_text {
        float: left;
        color: #72edf5;
        margin-top: -6px;
        margin-left: 10px;
        font-size: 14px;
      }
    }
  }
}

.omap-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 2px solid #00f;
}


.omap-scale-line {
  background: rgba(0, 60, 136, 0.3);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.omap-scale-line-inner {
  border: 1px solid #eee;
  border-top: none;
  color: #eee;
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
}

.omap-overlay-container {
  will-change: left, right, top, bottom;
}

.omap-unsupported {
  display: none;
}

.omap-unselectable,
.omap-viewport {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.omap-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

.omap-grabbing {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.omap-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.omap-control {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 2px;
  z-index: 1;
}

.omap-control:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.omap-zoom {
  top: 0.5em;
  left: 0.5em;
}

.omap-rotate {
  top: 0.5em;
  right: 0.5em;
  transition: opacity 0.25s linear, visibility 0s linear;
}

.omap-rotate.omap-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s linear, visibility 0s linear 0.25s;
}

.omap-zoom-extent {
  top: 4.643em;
  left: 0.5em;
}

.omap-full-screen {
  right: 0.5em;
  top: 0.5em;
}

@media print {
  .omap-control {
    display: none;
  }
}

.omap-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: #fff;
  font-size: 1.14em;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: 0.4em;
  background-color: rgba(0, 60, 136, 0.5);
  border: none;
  border-radius: 2px;
}

.omap-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.omap-zoom-extent button {
  line-height: 1.4em;
}

.omap-compass {
  display: block;
  font-weight: 400;
  font-size: 1.2em;
  will-change: transform;
}

.omap-touch .omap-control button {
  font-size: 1.5em;
}

.omap-touch .omap-zoom-extent {
  top: 5.5em;
}

.omap-control button:focus,
.omap-control button:hover {
  text-decoration: none;
  background-color: rgba(0, 60, 136, 0.7);
}

.omap-zoom .omap-zoom-in {
  border-radius: 2px 2px 0 0;
}

.omap-zoom .omap-zoom-out {
  border-radius: 0 0 2px 2px;
}

.omap-attribution {
  text-align: right;
  bottom: 0.5em;
  right: 0.5em;
  max-width: calc(100% - 1.3em);
}

.omap-attribution ul {
  margin: 0;
  padding: 0 0.5em;
  font-size: 0.7rem;
  line-height: 1.375em;
  color: #000;
  text-shadow: 0 0 2px #fff;
}

.omap-attribution li {
  display: inline;
  list-style: none;
  line-height: inherit;
}

.omap-attribution li:not(:last-child):after {
  content: " ";
}

.omap-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.omap-attribution button,
.omap-attribution ul {
  display: inline-block;
}

.omap-attribution.omap-collapsed ul {
  display: none;
}

.omap-attribution.omap-logo-only ul {
  display: none;
}

.omap-attribution:not(.omap-collapsed) {
  background: rgba(255, 255, 255, 0.8);
}

.omap-attribution.omap-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
  height: 1.1em;
  line-height: 1em;
}

.omap-attribution.omap-logo-only {
  background: 0 0;
  bottom: 0.4em;
  height: 1.1em;
  line-height: 1em;
}

.omap-attribution.omap-uncollapsible img {
  margin-top: -0.2em;
  max-height: 1.6em;
}

.omap-attribution.omap-logo-only button,
.omap-attribution.omap-uncollapsible button {
  display: none;
}

.omap-zoomslider {
  top: 4.5em;
  left: 0.5em;
  height: 200px;
}

.omap-zoomslider button {
  position: relative;
  height: 10px;
}

.omap-touch .omap-zoomslider {
  top: 5.5em;
}

.omap-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}

.omap-overviewmap.omap-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}

.omap-overviewmap .omap-overviewmap-map,
.omap-overviewmap button {
  display: inline-block;
}

.omap-overviewmap .omap-overviewmap-map {
  border: 1px solid #7b98bc;
  height: 150px;
  margin: 2px;
  width: 150px;
}

.omap-overviewmap:not(.omap-collapsed) button {
  bottom: 1px;
  left: 2px;
  position: absolute;
}

.omap-overviewmap.omap-collapsed .omap-overviewmap-map,
.omap-overviewmap.omap-uncollapsible button {
  display: none;
}

.omap-overviewmap:not(.omap-collapsed) {
  background: rgba(255, 255, 255, 0.8);
}

.omap-overviewmap-box {
  border: 2px dotted rgba(0, 60, 136, 0.7);
}

.omap-overviewmap .omap-overviewmap-box:hover {
  cursor: move;
}

.omap-tooltip {
  max-width: 180px;
  background-color: black;
  color: white;
  opacity: 0.9;
  font-size: 8pt;
  font-family: sans-serif;
  margin: 3px;
  border: 2px solid white;
  border-radius: 10px 10px 10px 0;
  padding: 2px 0 2px 5px;
}
</style>
